<template>
    <div class="container" :class="{ 'is-preview-3d': !!detail.pack_after_url }">
        <!-- <MaterialStoreSearchP /> -->

        <div class="main">
            <div class="box">
                <div class="cover-image">
                    <iframe :src="`https://3d-preview.vrnewg.com?url=${detail.pack_after_url}`"
                        v-if="detail.pack_after_url">
                    </iframe>

                    <el-carousel v-else :interval="5000" arrow="always" height="440px">
                        <el-carousel-item v-for="file in detail.preview_files" :key="file">
                            <img :src="file +
                                '?x-oss-process=image/watermark,image_' +
                                toBase64(
                                    'water/logo_white.png?x-oss-process=image/resize,P_30'
                                ) +
                                ',g_center,t_60'
                                " />
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="info">
                    <div class="title">{{ detail.name }}</div>

                    <div class="cell-group">
                        <div class="cell-item">
                            <div class="cell-label">ID</div>
                            <div class="cell-value">{{ detail.id }}</div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-label">发布人</div>
                            <div class="cell-value">华锐云空间</div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-label">素材大小</div>
                            <div class="cell-value">
                                {{ formatFileSize(detail.size || 0) }}
                            </div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-label">文件格式</div>
                            <div class="cell-value">{{ detail.format }}</div>
                        </div>
                        <div class="cell-item">
                            <div class="cell-label">类型</div>
                            <div class="cell-value">
                                {{ detail.sale_model == 1 ? "免费" : "付费" }}
                            </div>
                        </div>
                        <div class="cell-item" v-if="detail.sale_model != 1">
                            <div class="cell-label">价格</div>
                            <div class="cell-value price">
                                ￥{{ detail.price }}
                            </div>
                        </div>
                    </div>

                    <div class="buy-btn" :class="{
                        buying: detail.is_buy,
                    }" @click="onBuy">
                        {{ detail.is_buy ? "已购买" : "购买/兑换" }}
                    </div>

                    <div class="btn-group">
                        <img class="btn icon-cart" :src="`${_oss_}images/material-store/${detail.is_cart ? 'icon-cart-3' : 'icon-cart-2'
                            }.png`" @click="onAddCart" />
                        <!-- <img
                            class="btn icon-star"
                            :src="`${_oss_}images/material-store/icon-star-2.png`"
                        /> -->
                        <img class="btn icon-share" :src="`${_oss_}images/material-store/icon-share-2.png`"
                            @click="onShare" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 更多推荐 -->
        <div class="recommend">
            <div class="title">
                <!-- 更多素材推荐 -->
            </div>
        </div>
    </div>

    <DialogMaterialStorePayServiceP ref="payServiceRef" @success="onPaySuccess" />
    <DialogMaterialStoreCartSuccessP ref="cartSuccessRef" />
</template>
<script setup>
import { useContent } from ".";
import { StoreFreeExChange } from "~/api";

const { cartSuccessRef, detail, GetDetail, onAddCart, onShare } = useContent();
const userStore = useUserStore();
const payServiceRef = ref(null);

const onBuy = async () => {
    if (detail.value.is_buy) return false;

    if (userStore.isLogin) {
        if (detail.value.sale_model == 1) {
            const res = await StoreFreeExChange({
                store_id: detail.value.id,
            });

            if (res.code == 200) {
                Message().success("购买成功!");
                onPaySuccess();
            } else {
                Message().warning(res.msg);
            }
        } else {
            payServiceRef.value.show(
                detail.value.id,
                detail.value.integral > 0
            );
        }
    } else {
        LoginModal();
    }
};

const onPaySuccess = () => {
    GetDetail();
};

await GetDetail();
</script>
<style lang="scss" scoped>
.container {
    padding-top: 41px;
    background-color: #edf5fa;

    &.is-preview-3d {

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    }

    .main {
        width: 1200px;
        height: 507px;
        margin: 26px auto 0;
        background: #fff;
        border-radius: 12px;
        padding: 20px;

        .back {
            display: flex;
            align-items: center;
            color: #333;
            font-size: 14px;
            cursor: pointer;

            .el-icon {
                font-size: 16px;
                margin-right: 4px;
            }
        }

        .box {
            display: flex;
            margin-top: 13px;

            .cover-image {
                width: 800px;
                height: 440px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .info {
                margin-left: 36px;
            }
        }

        .title {
            font-size: 24px;
            color: #333;
            margin-top: 22px;
            margin-bottom: 33px;
            font-weight: bold;
        }

        .cell-group {
            .cell-item {
                display: flex;
                margin-bottom: 23px;

                .cell-label {
                    width: 100px;
                    font-size: 16px;
                    color: #666;
                }

                .cell-value {
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;

                    &.price {
                        color: #5085fb;
                    }
                }
            }
        }

        .buy-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 195px;
            height: 30px;
            font-weight: 500;
            font-size: 14px;
            color: #fff;
            background: #5085fb;
            border-radius: 4px;
            border: 1px solid #5085fb;
            cursor: pointer;

            &.buying {
                filter: grayscale(1);
                cursor: default;
            }
        }

        .btn-group {
            width: 195px;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;

            .btn {
                width: 30px;
                height: 30px;
                cursor: pointer;
            }
        }
    }

    .recommend {
        width: 1200px;
        margin: 0 auto;

        .title {
            font-weight: bold;
            font-size: 28px;
            color: #333;
            line-height: 30px;
            padding: 51px 0 27px;
        }
    }
}
</style>
